<template>
<div class='item'>
      <div>
         <!--props里面的数据可以直接用，不需要setup return -->
         <input type="checkbox" name="" v-model="good.selected"/>
      </div>
      <div style="display:flex">
          <img :src="DOMAIN + good.goods_info.goods_img"> 
          <label>{{good.goods_info.goods_name}}</label>
      </div>
      <div>
          <label>数量:{{number}}</label>
          <label>单价:{{price}}</label>
          <label>总价:{{totalPrice}}</label>
      </div>
      <div>
         <numer-input :num="number" @onNumChange='changeNum'/>
         <NumerInput :num="number" @onNumChange='changeNum'/>
      </div>
</div>
</template>

<script>
import { reactive } from "@vue/reactivity";
import { computed } from "@vue/reactivity";
import { toRefs } from "@vue/reactivity";
import NumerInput from "./NumerInput.vue";
import { DOMAIN } from "../utils/const";

export default {
   props:{
       good: {
          type: Object
       }
   },
   components: {
       NumerInput
   },
   emits:[

   ],
   setup(props, context) {
      const priceInfo = reactive({ 
        number: props.good.number,
        price: props.good.goods_info.goods_price,
        totalPrice: computed(
           () => props.good.goods_info.goods_price * props.good.number),
        })

      function changeNum(num){
          priceInfo.number = num
      }  
       
      return {
           //先把把count 转化为 ref(count),
           //把singlePrice 转化为 ref(singlePrice)
           //然后解构返回,不能直接解构，会丢失响应
          ...toRefs(priceInfo),
          DOMAIN,
          changeNum
      };
   },
}
</script>
<style  scoped>
.item{
   display: flex;
   font-size: 10px;
}

.item div{
   margin: 10px;
}

img{
   width: 100px;
   height: 100px;
}
</style>